<template>
  <div class="page">
    <TopBar :title="book_data.title"></TopBar>
    <div class="img">
      <img :src="book_data.img">
    </div>
    <div class="title">
      {{ book_data.title }}
    </div>
    <div class="title2">
      {{ article_data.title }}
    </div>
    <div class="author">{{ book_data.author }}</div>

    <div class="btn_box">
      <el-button class="btn">加入书架</el-button>
    </div>

    <div class="fix_bottom">
      <div class="bar">
        <div class="time" :style="{'left':'calc(' +audio_scale+'% - '+parseInt(70 * audio_scale / 100)+'px)'}">
          {{ audio_str }}
        </div>
      </div>
      <div class="bar_tools">
        <div class="tool1" @click="dec">-15s</div>
        <Icon class="tool2" type="ios-skip-backward" @click="preAct"/>
        <!--        <Icon class="tool3" type="md-play"/>-->
        <Icon class="tool3" v-if="audio_status == 'play'" @click="play" type="md-pause"/>
        <Icon class="tool3" v-if="audio_status == 'pause'" @click="play" type="md-play"/>
        <Icon class="tool4" type="ios-skip-forward" @click="nextAct"/>
        <div class="tool5" @click="inc">+15s</div>
      </div>
    </div>

  </div>
</template>

<script>
import TopBar from "@/components/TopBar";
import {mapState, mapMutations} from "vuex"

export default {
  name: "AudioView.vue",
  data() {
    return {
      id: this.$route.query.id,
      path: "http://ri8u8msw5.hn-bkt.clouddn.com/01.mp3",
      article_data: {},
      book_data: {},
    }
  },
  mounted() {
    this.getData()
  },
  components: {
    TopBar,
  },
  computed: {
    ...mapState(["audio_status", "audio_path", "audio_str", "audio_scale"])
  },
  watch: {
    $route(to, from) {
      this.getData()
      window.location.reload()
    }
  },
  methods: {
    ...mapMutations(["set_audio_path", "set_audio_status", "set_audio_dec", "set_audio_inc"]),
    getData() {
      this.$axios.get("book/article/" + this.id).then(res => {
        if (res.data.code == 200) {
          this.article_data = res.data.data
          this.book_data = res.data.data.book
          this.path = res.data.data.audio_file
        }
      })
    },
    preAct() {
      if (this.article_data.pre_id == 0) {
        this.$error("没有上一章了")
      } else {
        this.$router.push("/audio?id=" + this.article_data.pre_id)
      }
    },
    nextAct() {
      if (this.article_data.next_id == 0) {
        this.$error("没有下一章了")
      } else {
        this.$router.push("/audio?id=" + this.article_data.next_id)
      }
    },
    play() {
      this.set_audio_path(this.path)
      if (this.audio_status == "play") {
        this.set_audio_status("pause")
      } else {
        this.set_audio_status("play")
      }
    },
    dec() {
      this.set_audio_dec()
    },
    inc() {
      this.set_audio_inc()
    }
  }
}
</script>

<style scoped>
.page {
  background-color: rgb(242, 242, 242);
  min-height: 100vh;
}

.img {
  width: 150px;
  height: 215px;
  margin: 120px auto 0;
}

.img img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.title {
  font-size: 22px;
  text-align: center;
  width: 80%;
  margin: 20px auto 0;
  font-weight: bold;
  color: #000000;
}

.title2 {
  font-size: 16px;
  text-align: center;
  width: 80%;
  margin: 20px auto 0;
  color: #333333;
}

.author {
  margin-top: 30px;
  color: #BBBBBB;
  text-align: center;
}

.btn_box {
  text-align: center;
  margin-top: 20px;
}

.btn {
  border: none;
}

.bar {
  background-color: rgb(97, 191, 167);
  height: 2px;
  margin-top: 60px;
  position: relative;
}

.time {
  background-color: rgb(97, 191, 167);
  position: absolute;
  font-size: 12px;
  line-height: 12px;
  border-radius: 6px;
  padding: 2px 4px;
  top: -6px;
  /*left: 20%;*/
  color: #FFFFFF;
}

.bar_tools {
  background-color: #FFFFFF;
  /*height: calc(100vh - 555px);*/
  height: calc(100% - 60px);
  display: flex;
  justify-content: space-between;
  /*padding-top: 100px;*/
  font-size: 18px;
  text-align: center;
  align-items: center;
  padding: 25px 0;
}

.tool1, .tool5 {
  width: 100px;
  font-weight: bold;
}

.tool2, .tool4 {
  font-size: 30px;
  margin: 0 30px;
}

.tool3 {
  font-size: 40px;
  background-color: rgb(97, 191, 167);
  padding: 12px;
  border-radius: 50%;
  color: #FFFFFF;
  text-align: center;
}

.fix_bottom {
  width: 100%;
  height: 200px;
  position: fixed;
  bottom: 0;
}
</style>